<template>
  <div>
    <BasicTable @register="registerTable">
      <template #roleNames="{ record }">
        <p v-for="item in record.roleList">
          <a-tag color="purple" @click="showRoleContent(item, record.nickName)">{{ item.roleName }}</a-tag>
        </p>
      </template>
      <!--按钮定义-->
      <template #toolbar>
        <a-dropdown v-if="hasSelectedRows">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="handleBatchDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <!--操作栏-->
      <template #action="{ column, record, index }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <!--用户添加修改-->
    <UserDrawer @register="registerDrawer" @success="reload" />
    <LookRoleAuth @register="registerLookRoleAuthDrawer" />
    <UserCheckDrawer @register="registerUserCheckDrawer" @success="reload" />
    <UserWaitCheckDrawer @register="registerUserWaitCheckDrawer" @success="reload" />
    <SysLogModal @register="registerSysLogModal" />
  </div>
</template>

<script lang="ts" name="user" setup>
import { ActionItem, BasicTable, TableAction } from '@/components/table';
import UserDrawer from './components/UserDrawer.vue';
import LookRoleAuth from './components/LookRoleAuth.vue';
import UserCheckDrawer from './components/UserCheckDrawer.vue';
import UserWaitCheckDrawer from './components/UserWaitCheckDrawer.vue';
import SysLogModal from '../log/components/SysLogModal.vue';
import { useDrawer } from '@/components/drawer';
import { useBaseTable } from '@/hooks/flyme/useBaseTable';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/modal';

//引入table列定义
import { columns, searchFormSchema } from './data/user.data';
//引入接口
import { Api } from './data/user.api';

const { createMessage, createConfirm } = useMessage();
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerLookRoleAuthDrawer, { openDrawer: openLookRoleAuthDrawer }] = useDrawer();
const [registerUserCheckDrawer, { openDrawer: openUserCheckDrawer }] = useDrawer();
const [registerUserWaitCheckDrawer, { openDrawer: openUserWaitCheckDrawer }] = useDrawer();
const [registerSysLogModal, { openModal: openSysLogModal }] = useModal();
// 列表页面公共参数、方法
const { prefixCls, tableContext, handleSuccess, handleDelete, handleBatchDelete, handlePost } = useBaseTable({
  designScope: 'user-list',
  tableProps: {
    //列表标题
    title: '用户列表',
    //主键字段
    rowKey: 'userId',
    //列表接口
    listUrl: Api.list,
    //删除接口
    delUrl: Api.remove,
    //列表接口扩展handler
    handlerName: 'shopUserPageListHandler',
    //列字段定义
    columns: columns,
    //查询Form配置
    formConfig: {
      labelWidth: 150,
      showExportButton: true,
      schemas: searchFormSchema,
    },
    //操作列配置
    actionColumn: {
      width: 180,
      fixed: 'right',
    },
    //查询前处理
    beforeFetch: params => {
      return Object.assign({ column: 'createTime', order: 'desc' }, params);
    },
  },
});

//注册table数据
const [registerTable, { reload }, { hasSelectedRows }] = tableContext;

/**
 * 新增事件
 */
function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
    showFooter: true,
  });
  reload();
}

/**
 * 编辑事件
 */
async function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}

/**
 * 审核事件
 */
async function handleCheck(record: Recordable) {
  openUserCheckDrawer(true, {
    record,
    isUpdate: true,
  });
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
      auth: 'ACTION_editBaseUser',
    },
   /* {
      label: '提交审核',
      onClick: handleAgainCheck.bind(null, record),
      ifShow: record.checkState == 2,
      auth: 'ACTION_baseUserSubmitCheck',
    },
    {
      label: '审核',
      onClick: handleCheck.bind(null, record),
      ifShow: record.checkState == 0,
      auth: 'ACTION_baseUserCheck',
    },*/
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
      auth: 'ACTION_deleteBaseUser',
    },
   /* {
      label: '解除锁定',
      popConfirm: {
        title: '是否确认解除锁定',
        confirm: handleUnLock.bind(null, record),
      },
    },
    {
      label: '操作日志',
      onClick: handleLookLog.bind(null, record),
    },*/
    {
      label: '禁用',
      popConfirm: {
        title: '是否确认禁用该账号',
        confirm: handleSetStatus.bind(null, record),
      },
      ifShow: record.status == 1,
      auth: 'ACTION_baseUserDisable',
    },
    {
      label: '启用',
      popConfirm: {
        title: '是否确认启用该账号',
        confirm: handleSetStatus.bind(null, record),
      },
      ifShow: record.status == 0,
      auth: 'ACTION_baseUserEnable',
    },
  ];
}

/**
 * 解锁
 */
async function handleUnLock(record: Recordable) {
  await handlePost(Api.unLock, { userId: record.userId });
}

/**
 * 禁用启用
 */
async function handleSetStatus(record: Recordable) {
  await handlePost(Api.setStatus, { userId: record.userId });
}

/**
 * 驳回状态时再次提交
 */
async function handleAgainCheck(record: Recordable) {
  openUserWaitCheckDrawer(true, {
    record,
    isUpdate: true,
  });
}

/**
 * 展示角色所拥有的权限内容
 */
async function showRoleContent(item, nickName) {
  item['nickName'] = nickName;
  openLookRoleAuthDrawer(true, {
    item,
    isUpdate: true,
  });
}

/**
 * 查看操作日志
 */
async function handleLookLog(record: Recordable) {
  openSysLogModal(true, {
    record,
    isUpdate: false,
  });
}
</script>

<style scoped></style>
